<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h4>{{site}}</h4>
    <h2>{{details()}}</h2>
    <h3 v-html="msg"></h3>
    <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
    <br><br>
    <div v-bind:class="{'class1': use}">
      v-bind:class 指令 当前路径:{{this.$router.currentRoute.fullPath}}
    </div>

    <p>input 元素：</p>
    <input v-model="message" placeholder="编辑我……">
    <p>消息是: {{ message }}</p>
    <p>消息是: {{ md5Msg }}</p>

    <p>textarea 元素：</p>
    <p style="white-space: pre">{{ message2 }}</p>
    <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
  </div>
</template>

<script>
import md5 from 'js-md5'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '欢迎来到菜鸟教程',
      site: '菜鸟是你爸爸',
      use: false,
      message: 'hhelo',
      message2: 'world'
    }
  },
  created () {
    console.log(this)
  },
  methods: {
    details: function () {
      console.log(md5.hmac('hello', '1224234234'))
      return md5(this.msg + '学习')
    }
  },
  computed: {
    md5Msg: function () {
      return this.msg + this.site
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.class1{
   background: #444;
   color: #eee;
 }
</style>
